
<script setup lang="ts">
import type { HotSearchType } from '@/types/Search'
defineProps<{
  hotList: HotSearchType[]
}>()
const emit = defineEmits(['didClickCell'])
</script>

<template>
  <div class="top">
    <div class="title">
      热搜榜
    </div>
  </div>

  <div class="list">
    <div class="cell" v-for="item in hotList" :key="item.id" style="height: 10vw;" @click="emit('didClickCell',item)">
      <span class="id txt" :class="[ item.id===1 || item.id===2 ||item.id===3  ? 'id-select-color' : 'id-normal-color' ]"> {{ item.id }}</span>
      <span class="name txt">  {{ item.title }} </span>
      <span class="flag hot-flag" v-if="item.flag" :class="[ item.flag==='热'  ? 'hot-flag' : 'new-flag' ]">  {{ item.flag }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.top {
  padding: 0 3vw;
  background-color: transparent;
  width: 100%;
  height: 10vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  color: #fff;
  font-size: 4vw;
}

.cell {
  display: flex;
  align-items: center;
}

.txt {
  font-size: 4vw;
}
.id {
  margin-left: 4vw;
}
.id-normal-color {
  color: #606060;
}
.id-select-color {
  color: rgb(204, 54, 35);
}
.name {
  color: #fff;
  margin-left: 3vw;
}
.flag {
  display: inline-block;
  border-radius: 1vw;
  padding: 1vw;
  font-size: 2vw;
  height: 4vw;
  width: 4vw;
  text-align: center;
  line-height: 2vw;
  margin-left: 3vw;
}
.hot-flag {
  color: rgb(204, 54, 35);
  background-color: rgb(209, 120, 74);
}
.new-flag {
  color: rgb(240, 175, 79);
  background-color: rgb(120, 80, 40);
}
</style>
